<template>
    <div class="three">
        <van-tabs v-model="tab" @click="changeTab">
            <van-tab :title="title.name" v-for="(title, index) in titles" :key="index">
                <slide :allGoods="title" :tabIndex="index" :active="active"/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    import Slide from '../../components/sale/slide.vue';
    import {Tab, Tabs} from 'vant';

    Vue.use(Tab).use(Tabs);

    export default {
        name: 'elm',
        data() {
            return {
                active: 0, // menu的序号
                tab: 0, // tab栏的序号
                titles: [],
                dis: false
            };
        },
        computed: {},
        created() {
        },
        mounted() {
            let tab = this.$route.query.tab;
            let tid = this.$route.query.tid;
            if (typeof tid !== 'undefined') {
                // 若从首页传入tid，获取分类标签定位
                this.$Sale.groupAll().then(res => {
                    this.titles = res.data;
                    this.titles.forEach((item, index) => {
                        if (item.tid === tid) {
                            this.tab = index;
                        }
                    });
                }, () => {
                });
            } else {
                // 若从详情页返回tab，获取分类标签定位
                this.$Sale.groupAll().then(res => {
                    this.titles = res.data;
                });
                this.tab = parseInt(tab);
                this.active = parseInt(this.$route.query.active);
            }
        },
        methods: {
            changeTab() {
                // 当前激活tab改变时
                this.active = 0;
                // console.log(222, 'tab变化', index);
            }
        },
        watch: {},
        components: {
            Slide
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
</style>
